<template>
  <div class="backlog" v-loading="loading">
    <div class="backlog-mode" v-for="(item, index) in tableData" :key="index">
      <div>
        <div>
          <div>成品加工单编码: {{ item.processing_code }}</div>
          <div>SKU编码: {{ item.sku_code }}</div>
          <div>款名: {{ item.type_name }}</div>
        </div>
        <div>
          <div>款号: {{ item.type_no }}</div>
          <div>颜色编码: {{ item.color_code }}</div>
          <div>尺码编码: {{ item.size_code }}</div>
        </div>
        <div>
          <div>流水号:</div>
          <div>
            {{ item.str_s_number }}
            <div></div>
            {{ item.end_s_number }}
          </div>
          <div>
            共 <span>{{ item.num }}</span> 条
          </div>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="onExamine(item.id, 1)"
          >通过</el-button
        >
        <el-button type="danger" @click="onExamine(item.id, 2)">拒绝</el-button>
      </div>
    </div>
    <pagination
      style="clear: both"
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postCodeGetapplyabandoned"
    />
  </div>
</template>

<script>
import { postCodeGetapplyabandoned, postCodeSetapplyabandoned } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      form: {
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
    };
  },
  activated() {
    let form = this.form;
    this.postCodeGetapplyabandoned(form);
  },
  methods: {
    onExamine(id, status) {
      this.$confirm(`${status==1?'此操作将永久作废流水号':'此操作将拒绝作废流水号'}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id,
            status,
          };
          postCodeSetapplyabandoned(obj).then((res) => {
            let form = this.form;
            this.postCodeGetapplyabandoned(form);
            this.$message({
              type: "success",
              message: `${status == 1 ? "已通过" : "已拒绝"}`,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 作废列表
    async postCodeGetapplyabandoned(data) {
      this.loading = true;
      this.form = data;
      postCodeGetapplyabandoned(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.backlog {
  &-mode {
    margin-bottom: 20px;
    background: #ffffff;
    padding: 0 20px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    > div:nth-child(1) {
      > div:nth-child(1) {
        display: flex;
        > div {
          margin-right: 40px;
        }
      }
      > div:nth-child(2) {
        margin-top: 10px;
        display: flex;
        > div {
          margin-right: 40px;
        }
      }
      > div:nth-child(3) {
        display: flex;
        margin-top: 10px;
        > div:nth-child(2) {
          font-weight: 800;
          margin-left: 10px;
          display: flex;
          align-items: center;
          color: #409eff;
          > div {
            width: 30px;
            height: 1px;
            background: #666666;
            margin: 0 10px;
          }
        }
        > div:nth-child(3) {
          margin-left: 30px;
        }
      }
    }
  }
}
</style>
